<template>
	<view class="container">
		<!-- 背景封面 -->
		<view class="header">
			<image class="bgImg" :src="coverImg?coverImg:''"></image>
			<view class="uploading_box" @click="headleCover">
				<image src="/static/image/photog.png"></image>
				<view>上传封面 750*400px</view>
			</view>
		</view>
		<!-- 用户基本信息 -->
		<view class="user_box">
			<image :src="avatarUrl?avatarUrl:''" @click="headlePhoto" class="headImg"></image>
			<view class="input_box">
				<input type="text" :value="nickName" @input="headleInput" placeholder-style="color: rgba(0, 0, 0, 0.5);"
					placeholder="输入昵称..." />
			</view>
		</view>

		<!-- 占位 -->
		<view class="placeholder"></view>
		<!-- 个性签名 -->
		<view class="area_box">
			<view class="title">个性签名</view>
			<textarea :value="signature" placeholder-style="color: rgba(0, 0, 0, 0.35);" @input="headleArea"
				placeholder="用几句话介绍一下自己吧..." />
		</view>

		<!-- 保存 -->
		<view class="save" @click="headleSave">
			<view>保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coverImg: '', //保存封面图
				avatarUrl: '', //保存用户头像
				nickName: '', //保存用户昵称
				signature: '', //保存用户个性签名
				userId: null,
				status: false
			}
		},
		onLoad(options) {
			this.userId = options.id
			this.status = options.status ? JSON.parse(options.status) : ''
			this.getUserBasicMessage()
		},
		methods: {
			//点击上传封面回调
			headleCover() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						let tempFilePaths = res.tempFilePaths[0]
						uni.showLoading({
							title: '封面上传中...'
						})
						uni.uploadFile({
							url: 'https://lottery.qnsyw.cn/api/admin/upload-img',
							filePath: tempFilePaths,
							name: 'imgFile',
							header: {
								'Authorization': wx.getStorageSync('token')
							},
							success(res) {
								let data = JSON.parse(res.data)
								if (data.code === 0) {
									that.coverImg = data.data.imgUrl
									uni.hideLoading()
								} else {
									uni.showToast({
										title: "文件格式错误",
										icon: "none"
									})
									uni.hideLoading()
								}

							}
						})
					}
				})
			},
			// 点击上传头像回调
			headlePhoto() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						let tempFilePaths = res.tempFilePaths[0]
						uni.showLoading({
							title: '头像上传中...'
						})
						uni.uploadFile({
							url: 'https://lottery.qnsyw.cn/api/admin/upload-img',
							filePath: tempFilePaths,
							name: 'imgFile',
							header: {
								'Authorization': wx.getStorageSync('token')
							},
							success(res) {
								let data = JSON.parse(res.data)
								if (data.code === 0) {
									that.avatarUrl = data.data.imgUrl
									uni.hideLoading()
								} else {
									uni.showToast({
										title: "文件格式错误",
										icon: "none"
									})
									uni.hideLoading()
								}
							}
						})
					}
				})
			},

			//用户输入的昵称
			headleInput(e) {
				this.nickName = e.detail.value
			},
			//用户输入的签名
			headleArea(e) {
				this.signature = e.detail.value
			},
			//获取用户基本信息
			getUserBasicMessage() {
				this.myRequesy({
					url: 'admin/machine/detail',
					data: {
						user_id: this.userId
					}
				}).then(res => {
					if (res.data.code === 0) {
						this.coverImg = res.data.data.coverImg,
							this.avatarUrl = res.data.data.avatarUrl,
							this.nickName = res.data.data.nickName,
							this.signature = res.data.data.signature
					}
				})
			},

			// 添加/修改机器用户
			headleSave() {
				let that = this
				if (that.nickName.trim() && that.signature.trim() && this.coverImg !== '' && this.avatarUrl !== '') {
					this.myRequesy({
						url: that.status ? 'admin/machine/update' : 'admin/machine/add',
						method: 'POST',
						data: {
							user_id: that.userId,
							coverImg: that.coverImg,
							nickName: that.nickName,
							avatarUrl: that.avatarUrl,
							signature: that.signature
						}
					}).then(res => {
						if (res.data.code === 0) {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				} else {
					uni.showToast({
						title: "都是必填项!",
						icon: 'none'
					})
				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {

		// 背景封面区域
		.header {
			width: 750upx;
			height: 400upx;
			position: relative;

			.bgImg {
				width: 100%;
				height: 100%;
				background-color: #eee;
			}

			.uploading_box {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 334upx;
				height: 64upx;
				border-radius: 16upx;
				font-size: 26upx;
				color: rgba(255, 255, 255, 100);
				background-color: rgba(0, 0, 0, 0.3);
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 36upx;
					height: 36upx;
					margin-right: 10upx;
				}
			}
		}

		//用户基本信息
		.user_box {
			display: flex;
			align-items: center;
			padding: 40upx 30upx;

			image {
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				margin-right: 30upx;
				background-color: #eee;
			}

			.input_box {
				width: 360upx;
				padding-bottom: 20upx;
				border-bottom: 2upx solid rgba(244, 245, 245, 100);
				color: rgba(64, 64, 64, 100);
				font-size: 30upx;

				input {
					width: 100%;
				}
			}
		}

		//占位
		.placeholder {
			width: 750upx;
			height: 20upx;
			background-color: rgba(244, 245, 245, 100);
		}

		// 个性签名
		.area_box {
			padding: 32upx 30upx;

			.title {
				color: rgba(0, 0, 0, 0.35);
				font-size: 30upx;
				margin-bottom: 20upx;
			}

			textarea {
				width: 690upx;
				height: 240upx;
				line-height: 40upx;
				border-radius: 16upx;
				background-color: rgba(251, 251, 251, 100);
				border: 2upx solid rgba(0, 0, 0, 0.05);
				padding: 30upx;
				box-sizing: border-box;
				font-size: 30upx;

			}
		}

		.save {
			padding: 30upx;
			position: fixed;
			bottom: 0upx;
			left: 0upx;
			right: 0upx;

			view {
				width: 690upx;
				height: 88upx;
				line-height: 88upx;
				border-radius: 20upx;
				background-color: rgba(85, 119, 252, 100);
				color: rgba(255, 255, 255, 100);
				font-size: 30upx;
				text-align: center;
				box-shadow: 0px 0px 4upx 0px rgba(85, 119, 252, 100);
				font-family: Arial;
				border: 2upx solid rgba(0, 0, 0, 0.1);
			}
		}




	}
</style>
